<template>
  <fullScreenContainer>
    <div class="box">
      <el-container class="box">
        <el-header class="header ">
          <el-aside class="logo">
            <video id="logo-video" :poster="videoUrl" autoplay muted loop playsinline type="video/mp4"
              :src="videoUrl"></video>
          </el-aside>
          <el-container class="content">
            <el-row class="m-border-2 m-solid m-border-radius-10 m-border-color-6366f1 m-border-blink" :gutter="10"
              style="width: 100%;padding: 5px 0 5px 0">
              <el-col :span="4" style="margin-right: 20px">
                <el-card class="times-list" style="border-radius: 10px">
                  <div
                    style="color:white;display: flex;flex-direction: column;height: 60px;justify-content: space-around;align-items: center">
                    <div style="font-size: 18px;text-transform:uppercase"> {{ $t('iot.realTimeFinish') }}</div>
                    <div class=""
                      style="font-weight: bold;padding-top:10px;font-size: 24px;text-transform: capitalize;">
                      {{ data.text2 }}
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="4" @click="giveClick">
                <common-fieldset :title="$t('iot.numberToday')">
                  <div class="row-wrapper">
                    <div class="image-box">
                      <img :src="url" v-show="url">
                    </div>
                    <div class="numberWrapper">
                      {{ data.alarmNo }}
                    </div>
                  </div>
                </common-fieldset>
              </el-col>
              <el-col :span="15">
                <div class="menu-right">
                  <el-form :inline="true" :model="formData" label-width="120px">
                    <el-form-item :label="$t('wms.dates')">
                      <el-date-picker v-model="formData.dateList" type="daterange" unlink-panels range-separator="To"
                        :start-placeholder="$t('wms.startTime')" :end-placeholder="$t('wms.endTime')" :size="'default'"
                        format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                    <el-form-item :label="$t('mes.productionlineCode')" label-width="auto">
                      <el-select v-model="formData.line" clearable :placeholder="$t('wms.select')"
                        style="width: 200px;font-size:12px">
                        <el-option style="margin-left: 10px" v-for="item in data.lineList" :key="item.value"
                          :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="info" @click="reset" style="width: 30px;">
                        <el-icon>
                          <RefreshLeft />
                        </el-icon>
                      </el-button>
                      <el-button type="primary" @click="onSubmit" style="width: 30px;">
                        <el-icon>
                          <search />
                        </el-icon>
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
          </el-container>
        </el-header>
        <!-- 下面内容框 -->
        <el-main class="container">
          <div class="line1">二号线</div>
          <div class="line2">一号线</div>
          <!----------------------------------二号线----------------------->
          <!--CCD投料-->
          <div class="divLine divLine2_1">{{data.realTimeList2.filter(e => e.Code == 'CCDInput')?.[0].Qty}}</div>
          <!--JKJ叠片-->
          <div class="divLine divLine2_2">{{data.realTimeList2.filter(e => e.Code == 'JKJStack')?.[0].Qty}}</div>
          <!--JKJ产出-->
          <div class="divLine divLine2_3" style="color:#006633">
            {{data.realTimeList2.filter(e => e.Code == 'JKJOutput')?.[0].Qty}}</div>

          <!--PE入口1-->
          <div class="divLine divLine2_4">{{data.realTimeList2.filter(e => e.Code == 'PEInletOne')?.[0].Qty}}</div>

          <!--PE入口2-->
          <div class="divLine divLine2_5">{{data.realTimeList2.filter(e => e.Code == 'PEInletTwo')?.[0].Qty}}</div>

          <!--单叠码垛-->
          <div class="divLine divLine2_6">{{data.realTimeList2.filter(e => e.Code == 'SingleStackPalletize')?.[0].Qty}}
          </div>

          <!--PE翻版1-->
          <div class="divLine divLine2_7">{{data.realTimeList2.filter(e => e.Code == 'PEOverTurnOne')?.[0].Qty}}</div>

          <!--PE上料口1-->
          <div class="divLine divLine2_8">{{data.realTimeList2.filter(e => e.Code == 'PEFeedingOne')?.[0].Qty}}</div>

          <!--PE翻版2-->
          <div class="divLine divLine2_9">{{data.realTimeList2.filter(e => e.Code == 'PEOverTurnTwo')?.[0].Qty}}</div>

          <!--PE上料口2-->
          <div class="divLine divLine2_10">{{data.realTimeList2.filter(e => e.Code == 'PEFeedingTwo')?.[0].Qty}}</div>

          <!--PE出口2-->
          <div class="divLine divLine2_11">{{data.realTimeList2.filter(e => e.Code == 'PEOutletTwo')?.[0].Qty}}</div>
          <!--PE产出2-->
          <div class="divLine divLine2_12" style="color:#006633">
            {{data.realTimeList2.filter(e => e.Code == 'PEOutputTwo')?.[0].Qty}}</div>

          <!--PE出口1-->
          <div class="divLine divLine2_13">{{data.realTimeList2.filter(e => e.Code == 'PEOutletOne')?.[0].Qty}}</div>
          <!--PE产出1-->
          <div class="divLine divLine2_14" style="color:#006633">
            {{data.realTimeList2.filter(e => e.Code == 'PEOutputOne')?.[0].Qty}}</div>

          <!--PE合线统计-->
          <div class="divLine divLine2_15" style="color:#006633">
            {{data.realTimeList2.filter(e => e.Code == 'PEOutputMerge')?.[0].Qty}}</div>

          <!--打包投料-->
          <div class="divLine divLine2_16">{{data.realTimeList2.filter(e => e.Code == 'DRFeeding')?.[0].Qty}}</div>

          <!----------------------------------一号线----------------------->
          <!--CCD投料-->
          <div class="divLine divLine1_1">{{data.realTimeList1.filter(e => e.Code == 'CCDInput')?.[0].Qty}}</div>
          <!--JKJ叠片-->
          <div class="divLine divLine1_2">{{data.realTimeList1.filter(e => e.Code == 'JKJStack')?.[0].Qty}}</div>
          <!--JKJ产出-->
          <div class="divLine divLine1_3" style="color:#006633">
            {{data.realTimeList1.filter(e => e.Code == 'JKJOutput')?.[0].Qty}}</div>

          <!--PE入口1-->
          <div class="divLine divLine1_4">{{data.realTimeList1.filter(e => e.Code == 'PEInletOne')?.[0].Qty}}</div>

          <!--PE入口2-->
          <div class="divLine divLine1_5">{{data.realTimeList1.filter(e => e.Code == 'PEInletTwo')?.[0].Qty}}</div>

          <!--单叠码垛-->
          <div class="divLine divLine1_6">{{data.realTimeList1.filter(e => e.Code == 'SingleStackPalletize')?.[0].Qty}}
          </div>

          <!--PE翻版1-->
          <div class="divLine divLine1_7">{{data.realTimeList1.filter(e => e.Code == 'PEOverTurnOne')?.[0].Qty}}</div>

          <!--PE上料口1-->
          <div class="divLine divLine1_8">{{data.realTimeList1.filter(e => e.Code == 'PEFeedingOne')?.[0].Qty}}</div>

          <!--PE翻版2-->
          <div class="divLine divLine1_9">{{data.realTimeList1.filter(e => e.Code == 'PEOverTurnTwo')?.[0].Qty}}</div>

          <!--PE上料口2-->
          <div class="divLine divLine1_10">{{data.realTimeList1.filter(e => e.Code == 'PEFeedingTwo')?.[0].Qty}}</div>

          <!--PE出口2-->
          <div class="divLine divLine1_11">{{data.realTimeList1.filter(e => e.Code == 'PEOutletTwo')?.[0].Qty}}</div>
          <!--PE产出2-->
          <div class="divLine divLine1_12" style="color:#006633">
            {{data.realTimeList1.filter(e => e.Code == 'PEOutputTwo')?.[0].Qty}}</div>

          <!--PE出口1-->
          <div class="divLine divLine1_13">{{data.realTimeList1.filter(e => e.Code == 'PEOutletOne')?.[0].Qty}}</div>
          <!--PE产出1-->
          <div class="divLine divLine1_14" style="color:#006633">
            {{data.realTimeList1.filter(e => e.Code == 'PEOutputOne')?.[0].Qty}}</div>

          <!--PE合线统计-->
          <div class="divLine divLine1_15" style="color:#006633">
            {{data.realTimeList1.filter(e => e.Code == 'PEOutputMerge')?.[0].Qty}}</div>

          <!--打包投料-->
          <div class="divLine divLine1_16">{{data.realTimeList1.filter(e => e.Code == 'DRFeeding')?.[0].Qty}}</div>

        </el-main>
      </el-container>
    </div>
    <el-dialog v-model="data.dialogVisible" :title="$t('iot.details')" destroy-on-close :close-on-click-modal="false"
      draggable center :width="1200" style="margin-top: 20px" stripe>
      <el-table height="100%" :data="data.tableData" header-align="center" stripe :fit="true" border
        :header-cell-style="{ color: '#000', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%;">
        <el-table-column :label="$t('iot.title')" prop="LineName" width="140" />
        <el-table-column :label="$t('iot.point1')" prop="PointOneName" width="130" />
        <el-table-column :label="$t('iot.point2')" prop="PointTwoName" width="130" />
        <el-table-column :label="$t('iot.time')" prop="CreationTime" width="200" />
        <el-table-column :label="$t('iot.alarmMessage')" prop="AlarmMessage" />
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination :currentPage="data.currentPage" :page-size="data.pagesize" :page-sizes="[20, 30, 50, 100]"
          :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
          :total="data.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <template #footer v-if="false">
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </fullScreenContainer>
</template>

<script setup>
import fullScreenContainer from '@/components/fullScreenContainer'
import iconFont from '@/components/IconFont/iconFont'
import { provide, reactive, ref, onMounted, defineEmits, watch } from 'vue'
import useI18n from '@/hooks/language'
import config from '@/config'
import { getJJGRealTimeData, getAlarmRecord } from '@/api/iotApi'
import commonFieldset from '@/components/common/commonFieldset.vue'

const { t } = useI18n()
const videoUrl = config.ossUrl + '/afl-data-screen/images/job.mp4'
const url = config.ossUrl + '/afl-data-screen/images/icon-screen.png'
// 定义变量
const data = reactive({
  text2: '',
  dialogVisible: false,
  lineList: [{
    value: 'JJGPDLine1',
    label: t('iot.finishingLine')
  }, {
    value: 'JJGPDLine2',
    label: t('iot.finishingLine2')
  }],
  realTimeList1: [{
    Code: 'CCDInput',
    Name: 'CCD投料',
    Qty: 0,
    Seq: 1
  },
  {
    Code: 'JKJStack',
    Name: 'JKJ叠片',
    Qty: 0,
    Seq: 2
  },
  {
    Code: 'JKJOutput',
    Name: 'JKJ产出',
    Qty: 0,
    Seq: 3
  },
  {
    Code: 'PEInletOne',
    Name: 'PE入口1',
    Qty: 0,
    Seq: 4
  },
  {
    Code: 'PEInletTwo',
    Name: 'PE入口2',
    Qty: 0,
    Seq: 5
  },
  {
    Code: 'SingleStackPalletize',
    Name: '单叠码垛',
    Qty: 0,
    Seq: 6
  },
  {
    Code: 'PEOverTurnOne',
    Name: 'PE翻板1',
    Qty: 0,
    Seq: 7
  },
  {
    Code: 'PEOverTurnTwo',
    Name: 'PE翻板2',
    Qty: 0,
    Seq: 8
  },
  {
    Code: 'PEFeedingOne',
    Name: 'PE上料口1',
    Qty: 0,
    Seq: 9
  },
  {
    Code: 'PEFeedingTwo',
    Name: 'PE上料口2',
    Qty: 0,
    Seq: 10
  },
  {
    Code: 'PEOutletOne',
    Name: 'PE出口1',
    Qty: 0,
    Seq: 11
  },
  {
    Code: 'PEOutletTwo',
    Name: 'PE出口2',
    Qty: 0,
    Seq: 12
  },
  {
    Code: 'PEOutputOne',
    Name: 'PE产出1',
    Qty: 0,
    Seq: 13
  }, {
    Code: 'PEOutputTwo',
    Name: 'PE产出2',
    Qty: 0,
    Seq: 14
  },
  {
    Code: 'PEOutputMerge',
    Name: 'PE合线统计',
    Qty: 0,
    Seq: 15
  },
  {
    Code: 'DRFeeding',
    Name: '打包投料',
    Qty: 0,
    Seq: 16
  }], // 1 号线数据
  realTimeList2: [{
    Code: 'CCDInput',
    Name: 'CCD投料',
    Qty: 0,
    Seq: 1
  },
  {
    Code: 'JKJStack',
    Name: 'JKJ叠片',
    Qty: 0,
    Seq: 2
  },
  {
    Code: 'JKJOutput',
    Name: 'JKJ产出',
    Qty: 0,
    Seq: 3
  },
  {
    Code: 'PEInletOne',
    Name: 'PE入口1',
    Qty: 0,
    Seq: 4
  },
  {
    Code: 'PEInletTwo',
    Name: 'PE入口2',
    Qty: 0,
    Seq: 5
  },
  {
    Code: 'SingleStackPalletize',
    Name: '单叠码垛',
    Qty: 0,
    Seq: 6
  },
  {
    Code: 'PEOverTurnOne',
    Name: 'PE翻板1',
    Qty: 0,
    Seq: 7
  },
  {
    Code: 'PEOverTurnTwo',
    Name: 'PE翻板2',
    Qty: 0,
    Seq: 8
  },
  {
    Code: 'PEFeedingOne',
    Name: 'PE上料口1',
    Qty: 0,
    Seq: 9
  },
  {
    Code: 'PEFeedingTwo',
    Name: 'PE上料口2',
    Qty: 0,
    Seq: 10
  },
  {
    Code: 'PEOutletOne',
    Name: 'PE出口1',
    Qty: 0,
    Seq: 11
  },
  {
    Code: 'PEOutletTwo',
    Name: 'PE出口2',
    Qty: 0,
    Seq: 12
  },
  {
    Code: 'PEOutputOne',
    Name: 'PE产出1',
    Qty: 0,
    Seq: 13
  }, {
    Code: 'PEOutputTwo',
    Name: 'PE产出2',
    Qty: 0,
    Seq: 14
  },
  {
    Code: 'PEOutputMerge',
    Name: 'PE合线统计',
    Qty: 0,
    Seq: 15
  },
  {
    Code: 'DRFeeding',
    Name: '打包投料',
    Qty: 0,
    Seq: 16
  }], // 2 号线数据
  qtyList: [],
  tableData: [],
  alarmNo: 0,
  currentPage: 1,
  pagesize: 20,
  total: 0
})

const formData = reactive({
  dateList: [],
  line: ''
})

onMounted(async () => {
  data.text2 = tiems()
  // JJGRealTimeData()
  // alarmRecord()
  // setTime()
  // setTime2()
})

const setTime = () => {
  setInterval(async () => {
    data.text2 = tiems()
  }, 1000)
}

const setTime2 = () => {
  setInterval(async () => {
    alarmRecord()
    JJGRealTimeData()
  }, 3000)
}
const tiems = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = (now.getMonth() + 1).toString().padStart(2, '0')
  const day = now.getDate().toString().padStart(2, '0')
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const seconds = now.getSeconds().toString().padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 查询
const onSubmit = () => {
  JJGRealTimeData()
  alarmRecord()
}
// 点击报警数量的弹框
const giveClick = () => {
  data.dialogVisible = true
  alarmRecord2()
}
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  data.pagesize = val
  alarmRecord2()
}
const handleCurrentChange = (val) => {
  data.currentPage = val
  alarmRecord2()
}
const reset = () => {
  formData.line = 'JJGPDLine1'
  formData.dateList = []
  data.currentPage = 1
  alarmRecord()
  alarmRecord2()
  JJGRealTimeData()
}
// 报警数量
const alarmRecord = async () => {
  let start = ''
  let end = ''
  if (formData.dateList.length > 0) {
    start = formData.dateList[0]
    end = formData.dateList[1]
  }
  await getAlarmRecord({
    StartDate: start,
    EndDate: end,
    LineCode: formData.line,
    PageSize: data.pagesize,
    CurrentPage: data.currentPage
  }).then(res => {
    if (res.Status === 200) {
      data.alarmNo = res.TotalDataCount
    }
  })
}
const alarmRecord2 = () => {
  let start = ''
  let end = ''
  if (formData.dateList.length > 0) {
    start = formData.dateList[0]
    end = formData.dateList[1]
  }
  data.tableData = []
  getAlarmRecord({
    StartDate: start,
    EndDate: end,
    LineCode: formData.line,
    PageSize: data.pagesize,
    CurrentPage: data.currentPage
  }).then(res => {
    if (res.Status === 200) {
      data.tableData = res.LstData
      data.total = res.TotalDataCount
    }
  })
}
// 查询精加工点位实时数量
const JJGRealTimeData = async () => {
  let start = ''
  let end = ''
  if (formData.dateList.length > 0) {
    start = formData.dateList[0]
    end = formData.dateList[1]
  }
  data.realTimeList = []
  await getJJGRealTimeData({
    StartDate: start,
    EndDate: end,
    LineCode: formData.line
  }).then(res => {
    // console.log(res)
    if (res.Status === 200) {
      data.realTimeList1 = res.LstLine1PointInfo // 1 号线数据
      data.realTimeList2 = res.LstLine2PointInfo // 2 号线数据
      console.log('111', data.realTimeList1.filter(e => e.Code === 'CCDInput')[0].Qty)
    }
  })
}
</script>

<style scoped lang="scss">
@forward "index";

#app,
#dv-full-screen-container {
  background-color: #e3e3e3
}

* {
  margin: 0;
  padding: 0;
}
</style>
